<template>
  <div style="position: relative;width: 140px;">
    <el-input
      v-model="info_mat_no"
      type="input"
      placeholder="请输入内容"
      class="xw_inputPreNext"
      style="width: 140px;position: absolute;top: 3px;">
      <!--@keyup.enter.native="search"
      -->>
      <template slot="prepend">
        <div class="xw_divBtn">
          <el-button
            type="primary"
            @click="preNext(-1)"><i class="el-icon-caret-left"/> </el-button>
        </div>
      </template>
      <template slot="append">
        <div class="xw_divBtn">
          <el-button
            type="primary"
            @click="preNext(1)"><i class="el-icon-caret-right"/> </el-button>
        </div>
      </template>
    </el-input>
  </div>
</template>

<script>
import { post } from "@/lib/Util";
export default {
  name: "Coil",
  props: {
    matNo: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      info_mat_no: this.matNo
    };
  },
  watch: {
    matNo: {
      handler(newVal, oldVal) {
        if (this.info_mat_no !== newVal) {
          this.info_mat_no = newVal;
          this.search(this.info_mat_no);
        }
      },
      deep: true
    }
  },
  mounted() {},
  methods: {
    getMatNo() {
      return this.info_mat_no;
    },
    search(params) {
      // 搜索条件改变时
      console.log("查询条件", params);
      this.$emit("search", this.info_mat_no);
    },
    // 查询上一卷下一卷
    async preNext(type) {
      console.log(type, "preNext");
      const res = await post("/python/mppHsm/getCoilId", {
        info_mat_no: this.matNo,
        type: type
      });
      this.info_mat_no = res.info_mat_no;
      this.search(this.info_mat_no);
      console.log(res);
    }
  }
};
</script>

<style scoped>
/deep/.el-input-group__append {
  padding: 0px;
}
/deep/.el-input-group__prepend {
  padding: 0px;
}
/deep/.el-input__inner {
  padding: 2px 3px;
}
</style>
<style>
.xw_inputPreNext .xw_divBtn {
  width: 21px;
}
</style>
